<template>
  <!--电台列表展示-->
  <div class="radioList">
    <ul>
      <li>
        <div class="songImg">
          <img :src='infoList.picUrl' alt />
          <span>{{infoList.name}}</span>
        </div>
        <div class="creator">
          <p>{{infoList.dj.nickname}}</p>
        </div>
        <div class="listNumber">
          <p>节目{{infoList.programCount}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "radioList",
  props:['infoList']
};
</script>

<style scoped lang='less'>
.radioList {
  ul {
    padding: 0;
    li {
      display: flex;
      height: 50px;
      font-family: "Courier New", Courier, monospace;
      div:hover {
          color:#31c27c;
          cursor: pointer;
        }
      .songImg {
        flex: 2;
        img {
          width: 50px;
          height: 50px;
          vertical-align: middle;
        }
        span {
          margin-left: 20px;
        }
      }
      .creator {
        flex: 1;
      }
      .listNumber {
        flex: 1;
        p {
          text-align: center;
        }
      }
    }
  }
}
</style>